package com.ly.chatsimple.ui.chat

import androidx.compose.foundation.clickable
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.sharp.AccountCircle
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.ly.chatsimple.ui.chat.viewmodel.MainViewModel

@Composable
fun MainPage(mainViewModel: MainViewModel = viewModel(), navController: NavController) {
    val lazyListState = rememberLazyListState()
    LaunchedEffect(key1 = mainViewModel) {
        mainViewModel.refresh()
    }
    LazyColumn(state = lazyListState) {
        items(mainViewModel.clients) {
            ListItem(headlineContent = {
                Text(text = it.host)
            }, leadingContent = {
                Icon(imageVector = Icons.Sharp.AccountCircle, contentDescription = "Client")
            }, shadowElevation = 10.dp, modifier = Modifier.clickable {
//                navController.navigate() todo navChat with client info
            })
        }
    }
}

@Preview(backgroundColor = 0xffffff)
@Composable
private fun MainPagePre() {
    MainPage(mainViewModel = viewModel(), navController = rememberNavController())
}
